<template>
  <div class="div">
    <div class="wrap">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.user" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="SearchValue()" icon="el-icon-search">查询</el-button>
          <!-- <el-button type="primary" @click="onSubmit" icon="el-icon-refresh"
            style="background-color: white; color: black;">重置</el-button> -->

          <el-button @click="resetForm('numberValidateForm')">重置</el-button>
        </el-form-item>

      </el-form>
    </div>


    <el-form :inline="true" :model="userForm" class="demo-form-inline">
     <div id="liebiao">
      <el-form-item label="用户列表" class="liebiao">
        <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>

        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">

          <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username" :rules="[
              { required: true, message: '用户名不能为空' },

            ]">
              <el-input v-model.number="numberValidateForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" :rules="[
              { required: true, message: '密码不能为空' },

            ]">
              <el-input v-model.number="numberValidateForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email" :rules="[
              { required: true, message: '邮箱不能为空' },

            ]">
              <el-input v-model.number="numberValidateForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile" :rules="[
              { required: true, message: '手机号不能为空' },
              { type: 'number', message: '手机号必须为数字值' }
            ]">
              <el-input v-model.number="numberValidateForm.mobile" autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="Confirm">确 认</el-button>
          </div>
        </el-dialog>


      </el-form-item>
     </div>

    </el-form>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column type="index" prop="date" label="序号" width="100">
      </el-table-column>
      <!-- <el-table-column prop="id" label="id" width="100">
      </el-table-column> -->

      <el-table-column prop="username" label="姓名" width="100">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号码" width="150">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="180">
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="180" :formatter="formatTime">
      </el-table-column>
      <el-table-column prop="role_name" label="角色">
      </el-table-column>
      <el-table-column prop="mg_state" label="状态">
        <template v-slot:default="xxx">
          <el-switch @change="changeFlag(xxx.row, 'mg_state')" v-model="xxx.row.mg_state" active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small"><i class="el-icon-edit" @click="bianjixiugai(scope.row)">编辑</i></el-button>
          <el-button type="text" size="small"><i class="el-icon-delete" @click="del(scope.row)">删除</i></el-button>
          <el-button type="text" size="small"><i class="el-icon-setting" @click="dialogShezi = true">分配角色</i></el-button>
        </template>

      </el-table-column>

    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 20]"
      :page-size="100" layout="sizes, prev, pager, next" :total="7">
    </el-pagination>


    <!-- 编辑 -->
    <el-dialog title="编辑用户" :visible.sync="dialogBianji" width="30%">
      <el-form :model="userbianjiValue" ref="userbianjiValue" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username" :rules="[
          { required: false, message: '用户名不能为空' },

        ]">
          <!-- 绑定 -->
          <el-input v-model.number="userbianjiValue.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email" :rules="[
          { required: true, message: '邮箱不能为空' },

        ]">
          <el-input v-model.number="userbianjiValue.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile" :rules="[
          { required: true, message: '手机号不能为空' },
          { type: 'number', message: '手机号必须为数字值' }
        ]">
          <el-input v-model.number="userbianjiValue.mobile" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogBianji = false">取 消</el-button>
        <el-button type="primary" @click="BianJiqueding()">确 定</el-button>
      </span>
    </el-dialog>


    <!-- 删除 -->
    <el-dialog title="提示" :visible.sync="dialogShanchu" width="30%">
      <span>确认删除用户{{ this.username }}吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShanchu = false">Cancel</el-button>
        <el-button type="primary" @click="delDialog()">OK</el-button>
      </span>
    </el-dialog>


    <!-- 分配角色 -->

    <el-dialog title="编辑用户" :visible.sync="dialogShezi">
      <el-form :model="form">

        <el-form-item label="分配新角色" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="admin" value="shanghai"></el-option>
            <el-option label="路人甲" value="shanghai"></el-option>
            <el-option label="路人①" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShezi = false">取 消</el-button>
        <el-button type="primary" @click="dialogShezi = false">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { getUsers, getAddUsers, getdelUsers, getqueryUsers, getEditUsers } from "@/api/user.js"
export default {
  data() {
    return {
    userId: '',
      username: '',
      formInline: {
        username: '',
        password: '',
        email: '',
        mobile: '',
        // region: '',
        id: '',
      },
      userbianjiValue: {
      },

      dialogBianji: false,
      dialogShanchu: false,
      dialogShezi: false,
      userForm: {
        username: '',
        password: '',
        email: '',
        mobile: '',

      },
      value: true,
      tableData: [{
        date: '',
        username: '',
        create_time: '',
        email: '',

        role_name: '',
        mg_state: '',
        mobile: '',
      },
      ],

      dialogFormVisible: false,
      dialogTableVisible: false,
      form: {
        username: '',
        password: '',
        email: '',
        numberp: '',
        delivery: false,
      },
      formLabelWidth: '120px',
      numberValidateForm: {
        age: ''
      }
    }
  },
  methods: {
    getList() {
      getUsers('', 1, 10).then(res => {
        if (res.data.meta.status === 200) {
          this.tableData = res.data.data.users
        }
        // console.log(res);
      })
    },
    // 删除
    delDialog() {
      getdelUsers(this.userId).then((res) => {
      this.getList()
        this.dialogShanchu = false
      });
    },
    del(row) {
      this.userId = row.id
      this.username = row.username
      // console.log(row)
      this.dialogShanchu = true
    },
    // 编辑
    bianjixiugai(row) {
      getqueryUsers(row.id).then((res) => {
        this.userbianjiValue = res.data.data
        this.dialogBianji = true
      })
    },
    BianJiqueding() {
      let data = {
        id: this.userbianjiValue.id,
        email: this.userbianjiValue.email,
        mobile: this.userbianjiValue.mobile,
      }
     getEditUsers(data).then((res) => {
        this.dialogBianji = false;
        this.getList()
      })
    },
    handleSizeChange(val) {
      
    },
    handleCurrentChange(val) {
    },
    onSubmit() {
    },
    changeFlag() {
      // alert(1);

    },
    Confirm() {
      this.dialogFormVisible = false
      //  alert(1)
      let data = {
        username: this.numberValidateForm.username,
        password: this.numberValidateForm.password,
        email: this.numberValidateForm.email,
        mobile: this.numberValidateForm.mobile,
      }
      // 添加用户
      getAddUsers(data).then((res) => {
        this.getList()
      });
    },
   // 查询
    SearchValue() {
      getUsers(this.formInline.user, 1, 10).then(res => {
       if (res.data.meta.status === 200) {
          this.tableData = res.data.data.users
        }
      })
    },
    // 时间
    formatTime(row, column) {
      const date = new Date(row[column.property]* 1000)
      let year = date.getFullYear()//获取年
      let month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);//月
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      return year + '年' + month + '月' + day + '日' + hours + ':' + minutes
    }

  },
  // 挂载
  mounted() {
    this.getList();
  }
}

</script>

<style lang="scss" scoped>
.wrap{
  float: left;
  margin-top: 10px;
  

}

</style>